<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Sample of selective caching with service workers.">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Service Worker Sample: Selective Caching</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../../images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-title" content="Service Worker Sample: Selective Caching">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="../../images/apple-touch-icon-precomposed.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="icon" href="../../images/favicon.ico">

    <script>
      // Service workers require HTTPS (http://goo.gl/lq4gCo). If we're running on a real web server
      // (as opposed to localhost on a custom port, which is whitelisted), then change the protocol to HTTPS.
      if ((!location.port || location.port == "80") && location.protocol != 'https:') {
        location.protocol = 'https:';
      }
    </script>

    <link rel="stylesheet" href="../../styles/main.css">

    <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Special+Elite'>
    <style>
      .output {
        font-family: 'Special Elite';
      }
    </style>
  </head>

  <body>
    <h1>Service Worker Sample: Selective Caching</h1>

    <p>Available in <a href="https://www.chromestatus.com/feature/6561526227927040">Chrome 40+</a></p>

    <p>
      This sample demonstrates basic service worker registration, in conjunction with selective
      caching.
    </p>

    <p>
      In this case, we're caching all font resources by checking for responses with a <code>Content-Type</code> header
      that starts with <code>font/</code>. The same principle can be extended to selectively cache any category of
      content based on request or response headers (assuming the response is
      <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-opaque">non-opaque</a>).
    </p>

    <p>
      Visit <code>chrome://inspect/#service-workers</code> and click on the "inspect" link below
      the registered service worker to view logging statements for the various actions the
      <code><a href="service-worker.js">service-worker.js</a></code> script is performing.
    </p>

    <div class="output">
      <div id="status"></div>
    </div>

    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js', {scope: './'}).then(function() {
          // Registration was successful. Now, check to see whether the service worker is controlling the page.
          if (navigator.serviceWorker.controller) {
            // If .controller is set, then this page is being actively controlled by the service worker.
            document.querySelector('#status').textContent =
              'This funky font has been cached by the controlling service worker.';
          } else {
            // If .controller isn't set, then prompt the user to reload the page so that the service worker can take
            // control. Until that happens, the service worker's fetch handler won't be used.
            document.querySelector('#status').textContent =
              'Please reload this page to allow the service worker to handle network operations.';
          }
        }).catch(function(error) {
          // Something went wrong during registration. The service-worker.js file
          // might be unavailable or contain a syntax error.
          document.querySelector('#status').textContent = error;
        });
      } else {
        // The current browser doesn't support service workers.
        var aElement = document.createElement('a');
        aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
        aElement.textContent = 'Service workers are not supported in the current browser.';
        document.querySelector('#status').appendChild(aElement);
      }
    </script>

    <script>
      /* jshint ignore:start */
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
      /* jshint ignore:end */
    </script>
    <!-- Built with love using Web Starter Kit -->
  </body>
</html>
